<template>
<div>
  <div class="recommend">
    <banner-list :data="banner"></banner-list>
    <recommend-list :data="recommend"></recommend-list>
  </div>
  <transition enter-active-class="fly-in" leave-active-class="fly-out">
    <router-view/>
  </transition>
</div>
  
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";
import BannerList from "../components/recommend/banner-list";
import RecommendList from "../components/recommend/recommend-list";

export default {
  name: "Recommend",
  data(){
    return{
      needLoading:true  //需要loading动画
    }
  },
  components: { RecommendList, BannerList },
  computed: {
    ...mapState({
      banner: (state) => state.recommend.banner,
      recommend: (state) => state.recommend.recommend,
    }),
    ...mapGetters({
      loading: "recommend/loading",
    }),
  },
  created() {
    // this.$store.dispatch('recommend/getBanner')
    this.getBanner();
    this.getRecommendList();
  },
  methods: {
    ...mapActions({
      getBanner: "recommend/getBanner",
      getRecommendList: "recommend/getRecommendList",
    }),
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/global-style.scss";

.recommend {
  .content {
    position: absolute;
    top: 90px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
}
</style>
